<template>
  <div class="welcome">
    <canvas id="star-canvas"></canvas>
    <div class="cont">
      <div class="items">
        <div class="item" @click="itemClick(0)">Echarts</div>
        <div class="item" @click="itemClick(1)">Canvas</div>
        <div class="item" @click="itemClick(2)">Css</div>
        <div class="item" @click="itemClick(3)">Others</div>
        <!-- <div class="item" @click="itemClick(3)">Others</div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.start()
  },
  methods: {
    itemClick(type){
      if(type==0){
        this.$router.push({path:"/echarts"})
      }else if(type==1){
        this.$router.push({path:"/canvas"})
      }else if(type==2){
        this.$router.push({path:"/css"})
      }else if(type==3){
        this.$router.push({path:"/others"})
      }
    },
    start() {
      const canvas = document.getElementById("star-canvas");
      const ctx = canvas.getContext("2d");

      // 星星总数
      const starsNum = 5000;
      var radius = '0.' + Math.floor(Math.random() * 9) + 1;
      var focalLength = canvas.width * 2;
      let warp = 0;
      let centerX, centerY;
      let stars = [], star, i;

      // var stars = [],
      //   star;
      // var i;

      initStarsData()

      // 构建star 数据
      function initStarsData() {
        centerX = canvas.width / 2;
        centerY = canvas.height / 2;
        stars = [];
        for (i = 0; i < starsNum; i++) {
          star = {
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            z: Math.random() * canvas.width,
            o: '0.' + Math.floor(Math.random() * 99) + 1
          };
          stars.push(star);
        }
      }

      // 绘制star
      function drawStars() {
        var pixelX, pixelY, pixelRadius;
        if (canvas.width != window.innerWidth || canvas.width != window.innerWidth) {
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
          initStarsData();
        }
        if (warp == 0) {
          ctx.fillStyle = "rgba(0,10,20,1)";
          ctx.fillRect(0, 0, canvas.width, canvas.height);
        }
        ctx.fillStyle = "rgba(255, 255, 255, " + radius + ")";
        for (i = 0; i < starsNum; i++) {
          star = stars[i];

          pixelX = (star.x - centerX) * (focalLength / star.z);
          pixelX += centerX;
          pixelY = (star.y - centerY) * (focalLength / star.z);
          pixelY += centerY;
          pixelRadius = 1 * (focalLength / star.z);

          ctx.fillRect(pixelX, pixelY, pixelRadius, pixelRadius);
          ctx.fillStyle = "rgba(255, 255, 255, " + star.o + ")";
        }
      }

      function moveStars() {
        for (i = 0; i < starsNum; i++) {
          star = stars[i];
          star.z--;
          if (star.z <= 0) {
            star.z = canvas.width;
          }
        }
      }

      // 无限循环的动画
      (function executeFrame() {
        moveStars();
        drawStars();
        window.requestAnimationFrame(executeFrame)
      })()
    }
  }
};
</script>
<style lang='scss' scoped>
.welcome {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 10, 20, 1);
  #star-canvas {
    width: 100%;
    height: 100%;
  }
  .cont {
    position: fixed;
    top: 250px;
    width: 100%;
    .items {
      width: 100%;
      height: 100%;
      max-width: 1000px;
      margin: 0px auto;
      display: flex;
      // justify-content: space-between;      
      .item {
        margin: 0px auto;
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        
        border-style: groove;

        border: 2px solid #3f3f3f;
        color: #3f3f3f;
      }
      .item:hover {
        border: 2px solid #eeeeee;
        color: #ffffff;
        cursor: pointer;
        
      }
    }
  }
}
</style>
